<template>
    <div>
        房间名称:<input type="text" v-model="infoq.name"/>
        房型大小:<input type="text" v-model="infoq.mian"/>
        <input type="button" class="btn btn-success" value="查询" @click="getList"/>
        <h1>房型列表</h1>
        <input type="button" class="btn btn-success" value="房型增加" @click="ok" />
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房间名称</td>
                    <td>门市价</td>
                    <td>押金</td>
                    <td>房型大小</td>
                    <td>可住人数</td>
                    <td>状态</td>
                    <td>可否加床</td>
                    <td>图片</td>
                    <td>视频</td>
                    <td>介绍</td>
                </tr>
                <tr v-for="item in infoc.list":key="item.id":value="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.ya}}</td>
                    <td>{{item.mian}}</td>
                    <td>{{item.sum}}</td>
                    <td>{{item.state==1?"上架":"下架"}}</td>
                    <td>{{item.chuang==1?"是":"否"}}</td>
                    <td>
                        <img :src="item.phone" alt="" width="60" height="60">
                    </td>
                    <td>
                        <img :src="item.logo" alt="" width="60" height="60">
                    </td>
                    <td>{{item.jie}}</td>
                </tr>
            </tbody>
        </table>
        <div>
            当前第{{ infoq.pageindex }}页/共{{ infoc.totacount }}条/共{{ infoc.totapage }}页
            <input type="button" value="首页" @click="Fen(1)" />
            <input type="button" value="上一页" @click="Fen(infoq.pageindex-1)" />
            <input type="button" value="下一页" @click="Fen(infoq.pageindex+1)" />
            <input type="button" value="尾页" @click="Fen(infoc.totapage)" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';

const route=useRoute();
const router=useRouter();

const ok=()=>{
    router.push('/RoomXAdd');
}

//分页
const Fen=(num:any)=>{
    if(num<1){
        infoq.pageindex=1;
        return;
    }
    if(num> infoc.totapage){
        infoq.pageindex=infoc.totapage;
        return;
    }
    infoq.pageindex=num;
    getList();
}


//取数据
const infoq:any=reactive({
    pageindex:1,
    pagesize:3,
    roomname:'',
    mian:''
})
//传数据
const infoc:any=reactive({
    list:[],
    totacount:0,
    totapage:0
})

//钩子函数
onMounted(()=>{
    getList();
})
//显示
const getList=()=>{
    axios({
        url:'/api/RoomX/GetList',
        method:'get',
        params:infoq
    })
    .then(res=>{
        console.log(res);
        infoc.list=res.data.list;
        infoc.totacount=res.data.totacount;
        infoc.totapage=res.data.totapage;
    })
    .catch(err=>{
        console.log(err);
    })
}



</script>